iT邦幫忙

0

使用 CLI 操作 Webpack

  • 分享至 

  • xImage
  •  
  1. 建立一個新的專案資料夾,並初始化 npm 專案:
    https://ithelp.ithome.com.tw/upload/images/20231013/201635225AkZtLOObO.png

2.** 安裝 Webpack 和 Webpack CLI 作為開發相依性:**
https://ithelp.ithome.com.tw/upload/images/20231013/201635225Rz4r7JI4B.png

  1. 建立一個簡單的 JavaScript 檔案(例如index.js),其中編寫了您的程式碼。

  2. 建立一個 Webpack 設定檔(例如webpack.config.js),在其中設定 Webpack 的行為。
    https://ithelp.ithome.com.tw/upload/images/20231013/20163522hg8SuRMAqm.png

  3. 在package.json文件中新增一個NPM腳本,方便輕鬆執行Webpack。例如:
    https://ithelp.ithome.com.tw/upload/images/20231013/20163522WgjnAf4LPn.png

  4. 使用 Webpack CLI 來建立您的專案。在終端機中,執行以下命令:
    https://ithelp.ithome.com.tw/upload/images/20231013/20163522odKmyDTQ7G.png

  5. 在dist資料夾中會產生一個bundle.js文件,其中包含了你的JavaScript程式碼及其相依性的壓縮結果。

  6. 建立一個HTML檔案(例如index.html),在其中引入產生的bundle.js檔案:
    https://ithelp.ithome.com.tw/upload/images/20231013/20163522x6TretkzTf.png


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言